<template>
  <el-row>
    <el-col :span="24">
      <el-card style="margin-bottom: 10px"><div><h1>我的订单</h1></div></el-card>
      <el-card>
        <el-form :inline="true">
          <el-radio-group v-model="condition.status" @change="selectByPage(1)" >
            <el-radio-button label="全部" :value="9" />
            <el-radio-button label="未支付" :value="0" />
            <el-radio-button label="已支付" :value="1" />
            <el-radio-button label="已发货" :value="2"  />
            <el-radio-button label="已收货" :value="3" />
            <el-radio-button label="退货退款" :value="4" />
            <el-radio-button label="退货换货" :value="5" />
            <el-radio-button label="仅退款" :value="6" />
            <el-radio-button label="售后" :value="7" />
            <el-radio-button label="已完成" :value="8" />
          </el-radio-group>
          <el-form-item style="float: right;">
            <el-input v-model="condition.id" placeholder="请输入要搜索的订单号" @input="selectByPage(1)"/>
          </el-form-item>

        </el-form>
        <el-table :data="pageInfo.list"  style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div>
                <h3>商品详情</h3>
                <el-table :data="props.row.detailList" >
                  <el-table-column label="商品图片" width="80px" >
                    <template #default="scope">
                      <el-popover placement="right" trigger="hover" v-if="scope.row.good.picList.length > 0">
                        <template #reference>
                          <el-image  style="width: 30px; height: 30px" :src="SERVER_ADDR + '/goods/pic/' + scope.row.good.picList[0].url" />
                        </template>
                        <el-image v-for="(pic,index) in scope.row.good.picList" :key="index" style="width: 50px; height: 50px; margin-right: 5px" :src="SERVER_ADDR + '/goods/pic/' +pic.url" :fit="fit" />
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="good.name" />
                  <el-table-column label="描述" prop="good.dscp" />
                  <el-table-column label="颜色" prop="good.color" />
                  <el-table-column label="版本" prop="good.version" />
                  <el-table-column label="数量" prop="count" />
                  <el-table-column label="价格" prop="price" />

                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" width="80px" >
            <template #default="scope">
              <el-popover placement="right" trigger="hover" v-if="scope.row.detailList[0].good.picList.length > 0">
                <template #reference>
                  <el-image  style="width: 30px; height: 30px" :src="SERVER_ADDR + '/goods/pic/' + scope.row.detailList[0].good.picList[0].url" />
                </template>
                <el-image v-for="(pic,index) in scope.row.detailList[0].good.picList" :key="index" style="width: 50px; height: 50px; margin-right: 5px" :src="SERVER_ADDR + '/goods/pic/' +pic.url" :fit="fit" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column  label="订单编号" prop="id" />
          <el-table-column label="下单时间" prop="createTime" />
          <el-table-column  label="快递单号" prop="express" />
          <el-table-column  label="地址" prop="addrDetail" align="center"/>
          <el-table-column  label="总金额" prop="price" />
          <el-table-column label="支付方式"  align="center">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.payType == 0">余额支付</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 1">支付宝</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 2">微信</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 3">银联</el-tag>
              <el-tag type="primary"  v-if="scope.row.payType == 4">其他</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态"  align="center">
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.status == 0">未支付</el-tag>
              <el-tag type="success" v-if="scope.row.status == 1">已支付</el-tag>
              <el-tag type="success" v-if="scope.row.status == 2">已发货</el-tag>
              <el-tag type="primary" v-if="scope.row.status == 3">已收货</el-tag>
              <el-tag type="warning"  v-if="scope.row.status == 4">退货退款</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 5">退换货</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 6">仅退款</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 7">售后</el-tag>
              <el-tag type="info" v-if="scope.row.status == 8">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180px">
            <template #default="scope">
              <span v-if="scope.row.status == 8" style="margin-right: 10px">
                 <el-button size="small" plain type="info" v-if="scope.row.evaluateStatus == 0" @click="selectByIdToScore(scope.row.id)">
                    评价
                 </el-button>
                <el-button size="small" disabled plain type="info" v-if="scope.row.evaluateStatus == 1">
                    已评价
                 </el-button>
              </span>
              <el-button size="small" type="success" v-if="scope.row.status == 0" @click="toPayPage(scope.row.id)">
                立即付款
              </el-button>
              <el-button size="small" @click="delivery(scope.row.id)" type="success" v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 3">
                确认收货
              </el-button>
              <el-button size="small" @click="selectById(scope.row.id)" type="danger" v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 3 || scope.row.status == 8">
                申请售后
              </el-button>
              <el-tag size="small"  type="warning" v-if="scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6 || scope.row.status == 7">
                售后处理中
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                         @change="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 订单售后对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="售后处理" width="400">
    <el-form-item  label-width="10%">
      <el-button type="danger" @click="update(5)">退换货</el-button>
      <el-button type="danger"  @click="update(4)">退货退款</el-button>
      <el-button type="danger"  @click="update(6)">仅退款</el-button>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 订单售后框结束 -->

  <!-- 评价对话框开始 -->
  <el-dialog v-model="evaluateDialogShow" title="评价" width="500">
    <el-table :data="orderScore.detailList"  style="width: 100%">
      <el-table-column label="商品图片" width="80px" >
        <template #default="scope">
          <el-popover placement="right" trigger="hover" v-if="scope.row.good.picList.length > 0">
            <template #reference>
              <el-image  style="width: 30px; height: 30px" :src="SERVER_ADDR + '/goods/pic/' + scope.row.good.picList[0].url" />
            </template>
            <el-image v-for="(pic,index) in scope.row.good.picList" :key="index" style="width: 50px; height: 50px; margin-right: 5px" :src="SERVER_ADDR + '/goods/pic/' +pic.url" :fit="fit" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="good.name" />
      <el-table-column label="评价"  align="center">
        <template #default="scope">
        <el-rate
            v-model="scope.row.score"
            :texts="['差劲', '比较差', '一般', '比较好', '非常好']"
            show-text
        />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="evaluateDialogShow = false">
          取消
        </el-button>
        <el-button @click="evaluate">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 评价框结束 -->


</template>

<script setup>
//TODO 评价
//分页搜索
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {useRouter} from "vue-router";
import goodsApi from "@/api/goodsApi.js";
const value = ref()
const router = useRouter();
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
//搜索条件
const condition = ref({
  id:null,
  status:9
})
//被修改订单信息
const orderUpdate = ref({
  id:null,
  status:null
})
//评价订单信息
const evaluateOrder = ref({
  id:null,
  evaluateStatus:1
})
//是否显示评价对话框
const evaluateDialogShow = ref(false);
//是否显示售后对话框
const updateDialogShow = ref(false);
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
const orderScore = ref({

})
//评价
function evaluate(){
  let scoreVo = {}
  for (let g of orderScore.value.detailList) {
    scoreVo.goodsId=g.good.id
    scoreVo.score = g.score
    goodsApi.insertScore(scoreVo)
        .then(resp => {
          if(resp.code == 10000){
            sOre.value = true;
          }else {
            ElMessage.error(resp.msg)
          }
        })
  }
  orderApi.update(evaluateOrder.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success("评价成功")
          selectByPage(pageInfo.value.pageNum);
          evaluateDialogShow.value=false
        }else {
          ElMessage.error("评价失败");
        }
      })
}
//根据订单id查询商品信息进行评价
function selectByIdToScore(id){
  evaluateOrder.value.id=id
  orderApi.selectById(id)
      .then(resp => {
        orderScore.value = resp.data
        for (let goods of orderScore.value.detailList) {
          goods.score = null;
        }
        evaluateDialogShow.value = true
      })
}

//确认收货
function delivery(id){
  let data = {}
  data.id = id
  data.status = 8
  ElMessageBox.confirm(
      '确认已收到商品吗?',
      '确认收货',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'success',
      }
  )
      .then(() => {
        orderApi.update(data)
            .then(resp => {
              if(resp.code == 10000){
                selectByPage(pageInfo.value.pageNum);
              }else {
                ElMessage.error(resp.msg)
              }
            })
        ElMessage({
          message: "已完成订单！",
          type: 'success',
          duration: 1500
        })
      })
}

//申请售后处理
function update(status){
  let msg = {}
  if(status == 4){
    msg.top = '退货退款'
    msg.determine = '确认退货退款吗？'
    msg.successMsg = '申请退货退款成功！请等待客服联系'
  } else if (status == 5){
    msg.top = '退换货'
    msg.determine = '确认退换货吗？'
    msg.successMsg = '申请退换货成功！请等待客服联系'
  }else {
    msg.top = '退款'
    msg.determine = '确认退款吗？'
    msg.successMsg = '申请退款成功！请等待客服联系'
  }
  let data = {}
  data.id = orderUpdate.value.id
  data.status = status
  ElMessageBox.confirm(
      msg.determine,
      msg.top,
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        orderApi.update(data)
            .then(resp => {
              if(resp.code == 10000){
                updateDialogShow.value = false;
                selectByPage(pageInfo.value.pageNum);
              }else {
                ElMessage.error(resp.msg)
              }
            })
        ElMessage({
          message: msg.successMsg,
          type: 'success',
          duration: 1500
        })
      })
}

//根据id查询被修改订单的信息
function selectById(id){
  orderApi.selectById(id)
      .then(resp => {
        orderUpdate.value = resp.data;
        updateDialogShow.value=true;

      })
}

//立即付款
function toPayPage(id){
    router.push({
      path:'/user/pay',
      query:{
        orderId:id
      }
    })
}
function selectByPage(pageNum){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  orderApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
        loading.close();
        pageInfo.value = resp.data;
      });
}
selectByPage(1);
</script>

<style scoped>

</style>